<template>
	<view class="mainbgc mainpadding">
		<header-top :messageInfo="{typeFlag:true,message:'配送单',liner:false}"></header-top>
		<!-- 代发货人 -->
		<view class="mainpadding ffffff radius">
			<view class="flexbetween">
				<view class="bigtext">{{dataAll.customer.connet_name}}</view>
				<view class="daifahuo">{{dataAll.delivery_status==0?"待发货":dataAll.delivery_status==1?"待收货":"已完成"}}
				</view>
				<!-- <view class="yisongda">已送达</view> -->
			</view>
			<view class="dingdan flexleft margin_top" @click="phone(dataAll.customer.saler_mobile)">
				所属业务员：{{dataAll.customer.saler_name}}
				<view class="dizhiimg"></view>
			</view>
		</view>
		<!-- 地址信息 -->
		<view class="mainpadding ffffff margin_top radius flexbetween">
			<view class="">
				<view class="flexbetween">
					<view class="bigtext">龙发商行</view>
					<view class="bigtext normaltxt">18326273722</view>
				</view>
				<view class="flexbetween biankuang">
					<view class="dizhi flexleft">
						<view class="xiankuan">
							地址：很暗生郑州市
						</view>
						<!-- <view class="juli">{{kmUnit(dataAll.customer.distance)}} 100</view> -->
					</view>
				</view>
				<view class="flexleft margin_top">
					<view class="lansetext margin_right">
						欠款：<text class="xiaohong">234</text>
					</view>
					<view class="lansetext">
						预收款：<text class="xiaolv">12312</text>
					</view>
				</view>
			</view>
			<view class="flexright">
				<view class="addressicon" style="margin-right: 20rpx;width: 80rpx;height: 80rpx;" @click="openmap()">
				</view>
				<view class="phoneicon" style="width: 80rpx;height: 80rpx;"
					@click="phone(18326273722)"></view>
			</view>
		</view>
		<!-- 商品名称 -->
		<view class="mainpadding ffffff radius margin_top">
			<view class="header flexbetween">
				<view class="headerchild" style="flex: 1;">商品名称</view>
				<view class="headerchild headercenter" style="flex: 1;">规格</view>
				<view class="headerchild headercenter" style="flex: 0.7;">数量</view>
				<view class="headerchild headerright" style="flex: 0.7;">单价</view>
			</view>
			<view class="content">
				<view class="content_child " v-for="item in dataAll.goods_info">
					<view class="flexbetween">
						<view class="contentchild" style="flex: 1;">{{item.goods_name}}
							<text style="color: #ff0000;" v-if="item.purchase_type==2">(退货)</text>
						</view>
						<view class="contentchild headercenter" style="flex: 1;">{{item.unit_str}}</view>
						<view class="contentchild headercenter" style="flex: 0.7;">
							*{{item.purchase_type==2?'-':''}}{{item.number}}{{item.unit_name}}
						</view>
						<view class="contentchild headerright" style="flex: 0.7;">
							{{item.purchase_type==2?'-':''}}{{item.all_money}}</view>
					</view>
					<view class="flexbetween margin_topx">
						<view class="huisetext">备注：{{item.remark}}</view>
						<view class="lansetext" v-if="item.purchase_type==3">赠品</view>
					</view>
				</view>
			</view>
			<view class="header flexbetween">
				<view class="headerbottom" style="flex: 1;">合计：</view>
				<view class="headerbottom headercenter" style="flex: 1;">
					{{dataAll.goods_kind}}种(含赠品)
				</view>
				<view class="headerbottom headercenter" style="flex: 0.7;">{{dataAll.number}}</view>
				<view class="headerbottom headerright" style="flex: 0.7;color:#0BCB41">{{dataAll.real_money}}元</view>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="mainpadding ffffff radius margin_top">
			<view class="dingdan shanpin">订单号：
				<text class="erbaxs">{{dataAll.purchase_code}}</text>
			</view>
			<view class="dingdan shanpin margin_top">积分抵扣：
				<text class="erbaxs">300元</text>
			</view>
			<view class="dingdan shanpin margin_top">优惠券抵扣：
				<text class="erbaxs">{{dataAll.preferential_money}}元</text>
			</view>
			<view class="dingdan shanpin margin_top">订单金额：
				<!-- <text class="erbaxs" style="color: #0BCB41;">￥{{dataAll.all_money}}</text> -->
				<text class="erbaxs" style="color: #0BCB41;">￥{{dataAll.real_money}}</text>
			</view>
			<view class="dingdan shanpin margin_top">配送备注：
				<text class="erbaxs">{{dataAll.note || "无"}}</text>
			</view>
			<view class="dingdan shanpin margin_top">订单类型：
				<text class="erbaxs">{{type=="sales"?"销货":"退货"}}{{hantui && type=="sales"?"(含退货)":""}}</text>
			</view>
			<view class="dingdan shanpin margin_top">下单时间：
				<text class="erbaxs">{{dataAll.createtime_text}}</text>
			</view>
			<view class="dingdan shanpin margin_top flexbetween">
				<view class="">
					上次余额：
					<text class="erbaxs redtext">欠{{dataAll.arrears}}元</text>
				</view>
				<view class="beizhu" v-if="dataAll.delivery_status==2">备注</view>
			</view>
			<view class="dingdan shanpin margin_top flexbetween">
				<view class="">
					结款方式：
					<text class="erbaxs" v-for="item in dataAll.pay_data">{{item.pay_data}}{{item.money}}元</text>
				</view>
				<view class="beizhu" v-if="dataAll.delivery_status==2">备注</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				listid: "",
				type: "",
				lat: "31.000000",
				lng: "161.8898384",
				hantui: false,
				dataAll: {
					"id": 3, //ID
					"purchase_code": "XHD20221108001", //单据编号
					"stores_id": 1, //仓库ID
					"sale_user": null, //送货员ID
					"goods_kind": 0, //商品种类
					"all_money": 60, //金额
					"preferential_money": 5, //优惠金额
					"real_money": 55, //优惠后金额
					"delivery_status": "0", //送货状态:0=未配送,1=配送中,2=已送达
					"depart_time": null,
					"delivery_time": null,
					"note": "", //备注
					"arrears": 10, //本次欠款
					"createtime": 1667889156,
					"number": 21, //数量
					daifa_num: "",
					"id": 3, //ID
					"purchase_code": "XHD20221108001", //单据编号
					"customers_id": 1, //客户ID
					"stores_id": 1, //仓库ID
					"sale_user": null, //送货员ID
					"goods_kind": 0, //商品种类
					"all_money": 60, //金额
					"preferential_money": 5, //优惠金额
					"real_money": 55, //优惠后金额
					"delivery_status": "0", //送货状态:0=未配送,1=配送中,2=已送达
					"depart_time": null,
					"delivery_time": null,
					"note": "", //备注
					"arrears": 10, //本次欠款
					"createtime": 1667889156,
					"number": 21, //数量
					"id": 3, //ID
					"purchase_code": "XHD20221108001", //单据编号
					"customers_id": 1, //客户ID
					"stores_id": 1, //仓库ID
					"sale_user": null, //送货员ID
					"goods_kind": 0, //商品种类
					"all_money": 60, //金额
					"preferential_money": 5, //优惠金额
					"real_money": 55, //优惠后金额
					"delivery_status": "0", //送货状态:0=未配送,1=配送中,2=已送达
					"depart_time": null,
					"delivery_time": null,
					"note": "", //备注
					"arrears": 10, //本次欠款
					"createtime": 1667889156,
					"number": 21, //数量
					customer: {
						"id": 1, //ID
						"customer_name": "kehu1", //客户名称
						connet_name: "lxr", //联系人
						"customer_mobile": "13409200000", //联系电话
						"getgoods_address": "", //收货地址
						"lng": "113.625351", //经度
						"lat": "34.746303", //纬度
						"distance": 116104, //距离/米
						"saler_name": "李四", //销售名称
						"saler_mobile": "18043229872" //销售电话
					},
					goods_info: [{
						"id": 3, //ID
						"purchase_code": "XHD20221108001", //单据编号
						"customers_id": 1, //客户ID
						"stores_id": 1, //仓库ID
						"sale_user": null, //送货员ID
						"goods_kind": 0, //商品种类
						"all_money": 60, //金额
						"preferential_money": 5, //优惠金额
						"real_money": 55, //优惠后金额
						"delivery_status": "0", //送货状态:0=未配送,1=配送中,2=已送达
						"depart_time": null,
						"delivery_time": null,
						"note": "", //备注
						"arrears": 10, //本次欠款
						"createtime": 1667889156,
						"number": 21, //数量
					}],
					pay_data: [{
						"accounts_id": "1",
						"money": "30", //金额
						"account_name": "现金" //账户名称
					}, ],
				}
			}
		},
		onLoad(options) {
			let data = JSON.parse(decodeURIComponent(options.msg));
			this.listid = data.id
			this.type = data.type

		},
		onShow() {
		this.init()
		},
		methods: {
			// 获取当前位置信息
			getlocation() {
				let _this = this
				console.log("获取经纬度信息")
				uni.getLocation({
					type: 'gcj02',
					geocode: true, //设置该参数为true可直接获取经纬度及城市信息
					success: function(res) {
						_this.lat = res.latitude
						_this.lng = res.longitude
						_this.init()
					},
					fail(err) {
						console.log(err, "定位错误信息")
					}
				});
			},
			init() {
				let _this = this;
				httpRequest.request('appapi/manage/driver/detail', 'POST', {
					id: this.listid,
					type: this.type,
					lat: this.lat,
					lng: this.lng
				}, false, false, true).then(res => {
					if (res.code == 1) {
						res.data.goods_info.forEach(item => {
							if (item.purchase_type == 2) {
								this.hantui = true
							}
						})
						this.dataAll = res.data
					} else {
						httpRequest.toast(res.msg)
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			// 打开地图
			openmap() {
				uni.openLocation({
					latitude: Number(this.dataAll.customer.lat), //即将传到高德或腾讯地图的终点纬度  必须是数值，字符串无效
					longitude: Number(this.dataAll.customer.lng), //即将传到高德或腾讯地图的终点经度  必须是数值，字符串无效
					name: this.dataAll.customer.getgoods_address, //即将传到高德或腾讯地图的店铺名称
					address: this.dataAll.customer.getgoods_address, //即将传到高德或腾讯地图的详细地址
				})
			},
			phone(p) {
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {
					// console.log(e)  //用catch(e)来捕获错误{makePhoneCall:fail cancel}
				})
			},
			// 米，公里转换
			kmUnit(m) {
				var v;
				if (typeof m === 'number' && !isNaN(m)) {
					if (m >= 1000) {
						v = (m / 1000).toFixed(2) + 'km'
					} else {
						v = m + 'm'
					}
				} else {
					v = '0m'
				}
				return v;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.headerbottom {
		font-size: 28rpx;
		font-weight: bold;
	}

	.headerright {
		text-align: right;
	}

	.margin_topx {
		margin-top: 10rpx;
	}

	.huisetext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.lansetext {
		font-size: 24rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #999999;
	}

	.dizhiimg {
		width: 24rpx;
		height: 24rpx;
		margin-left: 12rpx;
		// margin-top: 14rpx;
		background-size: 100% 100%;
		background-image: url('@/static/image/system/wyqlittlephone.png');
	}

	.content {
		padding-top: 30rpx;
	}

	.contentchild {
		font-size: 26rpx;
	}

	.content_child {
		margin: 20rpx 0;
	}

	.headerchild {
		font-size: 32rpx;
		font-weight: bold;
	}

	.headercenter {
		text-align: center;
	}

	.dingdan {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.heji {
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
	}

	.shanpin {
		padding-bottom: 30rpx;
		border-bottom: 2rpx solid rgba(153, 153, 153, 0.05);
	}

	.erbaxs {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.flex2 {
		flex: 2;
	}

	.flex1 {
		flex: 1.5;
		text-align: right;
	}

	.biankuang {
		margin-top: 10rpx;
	}

	.juli {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
	}

	.dizhi {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #737373;
	}

	.daifahuo {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #F3AD3D;
	}

	.yisongda {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
	}

	.bigtext {
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
	}

	.normaltxt {
		font-weight: 500;
	}

	.beizhu {
		color: #0BBDCB;
	}

	.xiankuan {
		width: 300rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>